<template>
    <div class="unit-container layout-padding">
        <div class="mb15">
            <TableSearch :search="state.tableData.search" @search="onSearch" />

            <el-button size="default" type="success" class="ml10" @click="onOpenAddUnit('add')">
                <el-icon>
                    <ele-FolderAdd />
                </el-icon>
                新增单位
            </el-button>
        </div>

        <div class="unit-padding layout-padding-view layout-padding-auto">
            <Table ref="tableRef" v-bind="state.tableData" class="unit">

                <template v-slot:tableOperate="row">
                    <el-button size="small" text type="primary" @click="onOpenAddUnit('edit', row.row.id)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="onTableDelRow(row.row)">
                        <template #reference>
                            <el-button size="small" text type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </Table>
        </div>
        <UnitDialog ref="unitDialogRef" @refresh="getTableData()" />
    </div>
</template>

<script setup lang="ts" name="unit">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useUnitApi } from '/@/api/unit';

// 引入 api 请求接口
const unitApi = useUnitApi();

// 引入组件
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const UnitDialog = defineAsyncComponent(() => import('/@/views/unit/component/unitDialog.vue'));

// 定义变量内容
const tableRef = ref<RefType>();
const state = reactive<TableDemoState>({
    tableData: {
        data: [],
        header: [
            { key: 'typeName', colWidth: '', title: '单位类型', type: 'text', isCheck: true },
            { key: 'name', colWidth: '', title: '单位名称', type: 'text', isCheck: true },
            { key: 'code', colWidth: '', title: '单位代码', type: 'text', isCheck: true },
            { key: 'primaryUnit', colWidth: '', title: '是否主单位', type: 'text', isCheck: true },
            { key: 'factor', colWidth: '', title: '同主单位的转换因子', type: 'text', isCheck: true },
        ],
        config: {
            total: 0, // 列表总数
            loading: true, // loading 加载
            isBorder: false, // 是否显示表格边框
            isSerialNo: true, // 是否显示表格序号
            isSelection: false, // 是否显示表格多选
            isOperate: true, // 是否显示表格操作栏
        },
        search: [
            {
                label: '类型', prop: 'type', placeholder: '请选择类型', required: true, type: 'select', defaultVal: 1,
                options: [
                    {
                        value: 1,
                        label: '长度',
                    },
                    {
                        value: 2,
                        label: '质量',
                    },
                    {
                        value: 3,
                        label: '体积',
                    },
                    {
                        value: 4,
                        label: '汇率',
                    },
                ]
            },
        ],
        param: {
            type: 1,
        },
        printName: '产品',
    },
});
const unitDialogRef = ref();

//搜索
const onSearch = (data: EmptyObjectType) => {
    state.tableData.param.type = data.type;
    getTableData();
};

// 初始化列表数据
async function getTableData() {
    console.log("getTableData")
    state.tableData.config.loading = true;

    const unitData = await unitApi.queryUnitList(state.tableData.param);
    if (unitData.data == null)
        return Promise.resolve(true);

    const unitList: Unit[] = unitData.data;
    const showUnitList: EmptyObjectType<any>[] | { id: number; type: number; name: string; code: string; primaryUnit: boolean; factor: number; }[] = [];

    unitList.forEach(item => {
        let typeName = '';
        if (item.type == 1) {
            typeName = '长度';
        } else if (item.type == 2) {
            typeName = '质量';
        } else if (item.type == 3) {
            typeName = "体积";
        } else if (item.type == 4) {
            typeName = "汇率";
        }

        const showUnitItem = {
            id: item.id,
            type: item.type,
            typeName: typeName,
            name: item.name,
            code: item.code,
            primaryUnit: item.primaryUnit,
            factor: item.factor,
        }
        showUnitList.push(showUnitItem);
    });

    state.tableData.data = showUnitList;
    state.tableData.config.total = unitData.data.total;
    setTimeout(() => {
        state.tableData.config.loading = false;
    }, 500);
};

// 打开编辑弹窗
const onOpenAddUnit = (type: string, unitId?: number) => {
    console.log("openDialog");
    unitDialogRef.value.openDialog(type, unitId);
};

// 删除当前项回调
async function onTableDelRow(row: EmptyObjectType) {
    const param = {
        id: row.id,
    }
    await unitApi.deleteUnit(param);

    ElMessage.success(`删除${row.name}成功！`);
    getTableData();
};

// 页面加载时
onMounted(() => {
    getTableData();
});
</script>

<style scoped lang="scss">
.unit-container {
    .unit-padding {
        padding: 15px;
        .unit {
            flex: 1;
            overflow: hidden;
        }
    }
}
</style>
